<template>
    <div id="addAppPage">
        <h2 style="margin-bottom: 32px">创建应用</h2>
        <a-form
                :model="form"
                :style="{ width: '480px' }"
                label-align="left"
                auto-label-width
                @submit="handleSubmit"
        >
            <a-form-item field="appName" label="应用名称">
                <a-input v-model="form.appName" placeholder="请输入应用名称"/>
            </a-form-item>
            <a-form-item field="appDesc" label="应用描述">
                <a-input v-model="form.appDesc" placeholder="请输入应用描述"/>
            </a-form-item>
            <a-form-item field="appIcon" label="应用图标">
                <a-input v-model="form.appIcon" placeholder="请输入应用图标"/>
            </a-form-item>
            <!--      <a-form-item field="appIcon" label="应用图标">-->
            <!--        <PictureUploader-->
            <!--          :value="form.appIcon"-->
            <!--          :onChange="(value) => (form.appIcon = value)"-->
            <!--        />-->
            <!--      </a-form-item>-->
            <a-form-item field="appType" label="应用类型">
                <a-select
                        v-model="form.appType"
                        :style="{ width: '320px' }"
                        placeholder="请选择应用类型"
                >
                    <a-option
                            v-for="(value, key) of APPTYPE_MAP"
                            :value="Number(key)"
                            :label="value"
                    />
                </a-select>
            </a-form-item>
            <a-form-item field="scoringStrategy" label="评分策略">
                <a-select
                        v-model="form.scoringStrategy"
                        :style="{ width: '320px' }"
                        placeholder="请选择评分策略"
                >
                    <!--value：是字符串，key：是传给后端的整形-->
                    <a-option
                            v-for="(value, key) of SCORINGTYPE_MAP"
                            :value="Number(key)"
                            :label="value"
                    />
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" style="width: 120px">
                    提交
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
    import {reactive, ref, watchEffect} from 'vue';
    import {userLoginUsingPost} from "@/api/userController";
    import {useLoginUserStore} from "@/store/userStore";
    import message from "@arco-design/web-vue/es/message"
    import {useRouter} from "vue-router";
    import {createAppUsingPost, editAppUsingPost, getAppByIdUsingGet} from "@/api/appController";
    import {APPTYPE_MAP,SCORINGTYPE_MAP} from '@/constant/enum';

    const loginUserStore = useLoginUserStore();
    const router = useRouter();

    //定义创建应用所需的变量
    const form = ref({
        appDesc: '',
        scoringStrategy: 0,
        appIcon: 'https://tse1-mm.cn.bing.net/th/id/OIP-C._dhb4Bf5eoVfVT2drb4Z-wHaHa?w=201&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7',
        appName: '',
        appType: 0,
    } as API.AppAddRequest);

    //获取前页面跳转过来的参数
    interface Props {
        id:string
    }
    const props = withDefaults(defineProps<Props>(),{
        id:() =>{
            return "";
        }
    })

    const handleSubmit = async () => {
        let res : any
        //如果是修改
        if(props.id){
            res = await editAppUsingPost({
                id:props.id as any,
                ...form.value
            });
        }
        //创建
        else {
            res = await createAppUsingPost(form.value);
        }
        if (res.data.code === 0) {
            message.success("操作成功,即将跳转到应用详情页")
            setTimeout(() =>{
                router.push({
                    path: `/app/detail/${props.id || res.data.data}`,
                })
            },3000)

        } else {
            message.error("操作失败" + res.data.message);
        }
    };

    /**
     * 加载数据
     */
    const oldApp = ref<API.AppVO>()
    const loadData = async () => {
        if (!props.id) {
            return;
        }
        const res = await getAppByIdUsingGet({
            id: props.id as any,
        });
        if (res.data.code === 0 && res.data.data) {
            oldApp.value = res.data.data;
            form.value = res.data.data;
        } else {
            message.error("获取数据失败，" + res.data.message);
        }
    };

    /**
     * 监听 searchParams 变量，改变时触发数据的重新加载
     */
    watchEffect(() =>{
        loadData()
    })

</script>